import Taro, { useState, useCallback, cloneElement } from '@tarojs/taro';
import { View } from '@tarojs/components';
import PropTypes from 'prop-types';
import React from 'react';

/**
 * 通用防重复点击包装组件
 * 可以包裹任何需要防止重复点击的元素
 */
const AntiDuplicateWrapper = ({
  // 子元素，通常是可点击的元素
  children,
  // 点击事件回调
  onClick,
  // 冷却时间(毫秒)，默认1000ms
  coolDown = 1000,
  // 冷却时是否显示加载状态
  showLoading = false,
  // 加载状态的文本
  loadingText = '处理中...',
  // 自定义加载状态样式
  loadingClassName,
  // 点击区域的样式
  wrapperClassName,
  // 是否禁用防重功能
  disabled = false,
  // 其他属性
  ...rest
}) => {
  // 记录是否处于冷却状态
  const [isCooling, setIsCooling] = useState(false);

  // 处理点击事件
  const handleClick = useCallback(
    async (...args) => {
      // 如果处于冷却中或功能禁用，则不执行点击事件
      if (isCooling || disabled) return;

      try {
        // 设置为冷却状态
        setIsCooling(true);

        // 执行点击回调，如果是Promise则等待其完成
        const result = onClick?.(...args);
        if (result instanceof Promise) {
          await result;
        }
      } catch (error) {
        console.error('点击事件执行出错:', error);
        // 出错时也可以选择立即解除冷却状态
        // setIsCooling(false)
      } finally {
        // 冷却时间后恢复可点击状态
        setTimeout(() => {
          setIsCooling(false);
        }, coolDown);
      }
    },
    [isCooling, disabled, coolDown, onClick]
  );

  // 处理子元素，注入点击事件
  const renderChildren = () => {
    // 如果没有子元素，返回null
    if (!children) return null;

    // 如果是React元素，注入onClick事件
    if (React.isValidElement(children)) {
      return cloneElement(children, {
        onClick: handleClick,
        // 传递禁用状态给子元素
        disabled: children.props.disabled || false || isCooling || disabled,
        ...rest,
      });
    }

    // 如果是其他类型的子元素，用View包裹
    return (
      <View className={wrapperClassName} onClick={handleClick} {...rest}>
        {children}
      </View>
    );
  };

  // 渲染加载状态
  const renderLoading = () => {
    if (!showLoading || !isCooling) return null;

    return (
      <View className={`anti-duplicate-loading ${loadingClassName || ''}`}>
        <View className="loading-spinner" />
        {loadingText && <View className="loading-text">{loadingText}</View>}
      </View>
    );
  };

  return (
    <View className="anti-duplicate-wrapper">
      {renderChildren()}
      {renderLoading()}
    </View>
  );
};

// 属性类型检查
AntiDuplicateWrapper.propTypes = {
  children: PropTypes.node,
  onClick: PropTypes.func.isRequired,
  coolDown: PropTypes.number,
  showLoading: PropTypes.bool,
  loadingText: PropTypes.string,
  loadingClassName: PropTypes.string,
  wrapperClassName: PropTypes.string,
  disabled: PropTypes.bool,
};

export default AntiDuplicateWrapper;
